import React, {
  ReactElement,
  useState,
  useEffect,
  useImperativeHandle,
  forwardRef,
} from 'react'
import { Row, Col, Form, Select, DatePicker } from 'antd'
import style from '../index.less'
import commonStyle from '@/pages/publicStyle'
import moment from 'moment'
import { dataFormat2 } from '@/untils/dictionaries'

const RangePicker: any = DatePicker.RangePicker
const { Option } = Select
const layout = {
  labelCol: { span: 24 },
  wrapperCol: { span: 14 },
}
interface IProps {
  SignInData: any
  saveFormData: () => void
  isDrop: boolean
}
const SignIn = forwardRef((props: IProps, ref: any): ReactElement => {
  const [form] = Form.useForm()
  const [submitForm, setSubmitForm] = useState({
    activityType: '4',
    startDate: '',
    endDate: '',
    signInType: '',
  })
  // 修改活动日期
  const activityTimeChange = (dataString: string[]) => {
    let oldFormData = JSON.parse(JSON.stringify(submitForm))
    oldFormData.startDate = dataString[0]
    oldFormData.endDate = dataString[1]
    setSubmitForm(oldFormData)
  }
  // 返回完成校验数据
  const getOverFormData = () => {
    return submitForm
  }
  useImperativeHandle(ref, () => {
    return {
      form: form,
      getOverFormData: getOverFormData,
    }
  })
  // 初始化数据
  useEffect(() => {
    if (props.SignInData) {
      let getData = JSON.parse(JSON.stringify(props.SignInData))
      setSubmitForm(getData)
      form.setFieldsValue({
        activityTime: [
          getData.startDate
            ? moment(getData.startDate, dataFormat2)
            : undefined,
          getData.endDate ? moment(getData.endDate, dataFormat2) : undefined,
        ],
        signInType: getData.signInType,
      })
    }
  }, [])
  // 折叠时暂存数据
  useEffect(() => {
    return () => {
      if (!props.isDrop) {
        props.saveFormData(getOverFormData(), 'SignInData')
      }
    }
  }, [props.isDrop])
  const activityCheck = (rules: any, value: any, callback: any) => {
    try {
      if (submitForm.startDate && submitForm.endDate) {
        return Promise.resolve()
      } else {
        return Promise.reject('请选择活动日期')
      }
    } catch (error) {
      callback(error)
    }
  }
  const { detailFormTitle, formBorderBox } = style
  const { completeW } = commonStyle
  return (
    <div>
      <Form {...layout} form={form}>
        <div className={detailFormTitle}>基本信息</div>
        <div className={formBorderBox}>
          <Row>
            <Col span={12}>
              <Form.Item
                name="activityTime"
                label="活动时间"
                rules={[{ required: true, validator: activityCheck }]}
              >
                <RangePicker
                  format={dataFormat2}
                  onChange={(dates: moment.Moment[], datestrings: string[]) => {
                    activityTimeChange(datestrings)
                  }}
                  showTime
                  style={completeW}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="signInType"
                label="签到方式"
                rules={[{ required: true, message: '请选择签到方式' }]}
              >
                <Select
                  onChange={(value: string) => {
                    setSubmitForm({ ...submitForm, signInType: value })
                  }}
                >
                  <Option value="1">线上签到</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
        </div>
      </Form>
    </div>
  )
})
export default SignIn
